<template>
    <div>
        <!--导航条-->
        <div id="Tabbar">
            <span id="span">
                <span class="fa fa-angle-left"></span>
                <span @click="backClick">返回</span>
            </span>
            <span>商品列表</span>
        </div>
        <div ref="mask" id="mask">
            <img src="static/轮播.jpg" alt="">
            <div id="conditions">
                <span>销量</span>
                <span>新品</span>
                <span @click="priceClick" ref="price">价格
                    <img src="static/向上箭头.svg" v-if="isshow&&isshow1" >
                    <img src="static/向下箭头.svg" v-if="isshow&&!isshow1">
                </span>
                <span @click="PopupClick">
                    筛选
                    <img src="static/筛选.svg" alt="">
                    
                    
                </span>
            </div>
            <div>
                <div v-for="i in imgs" class="GoodsList">
                    
                        <div v-for="j in i.List" class="List">
                            <router-link :to="'/GoodsDetails/'+j.title" >
                                <img :src="j.img" alt="">
                                <p>{{j.title}}</p>
                                <p>{{j.content}}</p>
                                <p>￥{{j.price}}</p>
                            </router-link>
                        </div>
                    
                    
                </div>
            </div>
        </div>
        





        <div>
            <transition name="opacity">
                <div id="blank"  @click="changePopup" v-show="ispopup">
                </div>
            </transition>
            <transition name="move">
                <popup v-show="ispopup"  @pagechange="pagechange"></popup>
            </transition>
        </div>
        
        
    </div>
</template>

<script>
import popup from '../pages/Goods-List-Popup.vue'
import {mapState} from 'vuex'
export default {
    data:function(){
        return {
            isshow:false,
            isshow1:false,
            ispopup:false,
            imgs:[]
        }
    },
    methods:{
        pagechange:function(Popup){
            this.ispopup = false;
            if(Popup.weight==null){
                console.log(123)
            }else{
                this.imgs[0].List = this.imgs[0].List.filter(function(i){
                    return Popup.weight.split("~")[0]<i.weight<=Popup.weight.split("~")[1]
                })
            }
            if(Popup.level==null){
                console.log(4546)
            }else{
                this.imgs[0].List = this.imgs[0].List.filter(function(j){
                    return j.level == Popup.level
                })
            }
            if(Popup.year==null||Popup.year=="2005"){
                console.log(789)
            }else{
                this.imgs[0].List = this.imgs[0].List.filter(function(m){
                    return m.year = Popup.year;
                })
            
            }
            
            
        },
        backClick:function(){
            history.back();
        },
        PopupClick:function(){
            this.ispopup = true;
        },
        changePopup:function(){
            this.ispopup = false;
        },
        priceClick:function(){
            this.isshow = true;
            this.isshow1=!this.isshow1;
            this.$refs.price.style.color = "red";
            if(this.isshow==true&&this.isshow1==true){
                 function compare(property){
                    return function(obj1,obj2){
                        var value1 = obj1[property];
                        var value2 = obj2[property];
                        return value1 - value2;     // 降序
                    }
                }
                this.imgs[0].List = this.imgs[0].List.sort(compare("price"));
            }else if(this.isshow==true&&this.isshow1==false){
                function compare(property){
                    return function(obj1,obj2){
                        var value1 = obj1[property];
                        var value2 = obj2[property];
                        return value2 - value1;     // 升序
                    }
                }
                this.imgs[0].List = this.imgs[0].List.sort(compare("price"));
            }
           
            
        },
        qingqiu:function(){
            this.$store.dispatch("goodslist",this.$route.params)
            .then(data=>{
                this.imgs = this.imgs7;
            })
        }
    },
    computed:{
        ...mapState([
            "imgs7"
        ])
    },
    components:{
       popup
    },
    mounted:function(){
        
        this.qingqiu();
        
    }
}
</script>

<style scoped>
    #mask{
        margin-top: 8vh;
        height: calc(100vh - 8vh);
        overflow-y: scroll;
        background-color: #ededed;
    }
    #Tabbar{
        height: 8vh;
        width: 100vw;
        background-color: black;
        color: white;
        font-size: 4.5vw;  
        text-align: center;
        line-height: 8vh;
        position:fixed;
        top: 0;
        z-index:1000;
    }
    #Tabbar #span{
        line-height: 8vh;
        margin-right: 25vw;
        margin-left:-35vw;
    }
    img{
        width: 100vw;
    }
    #conditions{
        background-color: white;
        padding-bottom: 1vh;
    }
    #conditions span{
        margin: 1vh 7vw;
        font-size: 4vw;
        color: gray;
    }
    #conditions img{
        width: 4.5vw;
        position: relative;
        top: 0.5vh;
        left: -1.5vw;
    }
    #blank{
        position:absolute;
        top: 0;
        height: 100vh;
        width: 100vw;
        background-color: black;
        opacity: 0.5;
    }
    .opacity-enter,.opacity-leave-to{
        opacity: 0 !important;
    }
    .opacity-enter-active,.opacity-leave-active{
        transition:all 1s
    }
    .opacity-enter-to,.opacity-leave{
        opacity:0.5 !important;
    }
    .move-enter{
        transform: translate(0,100%);
        
    }
    .move-enter-active,.move-leave-active{
        transition: all 0.7s;
        
    }
    .move-enter-to{
        transform: translate(0,0);
       
    }

    .move-leave{
        transform: translate(0,0);
        
    }
    .move-leave-to{
        transform: translate(0,100%);
        
    }
    .GoodsList{
        
        margin-top: 2vh;
        display: flex;
        flex-wrap: wrap;
        background-color: white;
    }
    .List{
        width: 50vw;
        border: solid 1px #ededed;
        padding-top: 2vh;
    
    }
    a{
        text-decoration: none;
    }
    .List img{
        position: relative;
        left: 10vw;
        width: 20vh;
    }
    .List p{
        color: black;
        font-size: 3.5vw;
        margin: 0;
        margin-left: 4vw;
    }
    .List p:nth-of-type(2){
        margin: 2vh 4vw;
        font-size: 3vw;
        color: grey;
    }
    .List p:nth-of-type(3){
        font-size: 4vw;
        color: #EE4000;
        margin-left: 10vw;
        margin-bottom: 1vh;
    }
    
</style>